<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Topic - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script th:src="@{/js/messager.js}"></script>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <style>
        .ui-autocomplete-loading { background: white url('img/ui-anim_basic_16x16.gif') right center no-repeat; }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 3px;

            font-size:11px;
            line-height: 12px;
        }
        /* IE 6 doesn't support max-height
         * we use height instead, but this forces the menu to always be this tall
         */
        * html .ui-autocomplete {
            height: 200px;
        }
    </style>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-no-sidebar">
            <div id="nav-content" >
                <a th:href="@{/topics}">[[#{topic}]]</a>
                <a th:href="@{/topic/new}" class="current">[[#{topic.new}]]</a>
            </div>
            <div class="topic">
                <div class="comment message-edit-box message-edit-box-pro" style="position: relative;padding: 6px;">
                    <form action="" method="post">
                        <input type="hidden" name="type" th:if="${message.message_id == 0}" th:value="new" >
                        <input type="hidden" name="type" th:if="${message.message_id > 0}" th:value="edit" >
                        <input type="hidden" name="moduleId" th:value="${message.module_id}" >
                        <input type="hidden" name="parentId" th:value="${message.parent_id}" >
                        <input type="hidden" name="rootId" th:value="${message.root_id}" >
                        <input type="hidden" name="messageId" th:value="${message.message_id}" >
                        <input class="message-title" id="message-title" name="title1" maxlength="50" th:value="${message.title}" th:placeholder="#{topic.input_title}">
                        <div class="editor-md editor-md-max" id="editor-topic-content">
                            <textarea class="message-content ke-editor" id="edit-topic-content" name="content" rows="60" th:utext="${message.content}"></textarea>
                        </div>
                        <H5><span>[[#{problem.tags}]]</span></H5>
                        <div>
                            <div class="tags-autocomplete-select">
                                <input type="hidden" id="submit-tags" class="problem-tag" name="tagList" th:value="${message.tag}"/>
                                <i class="icon"></i>
                                <input id="input-tags" autocomplete="off" class="input-tags" ></input>
                                <div class="tags-autocomplete-select-menu"></div>
                            </div>
                        </div>
                        <div style="text-align:center;"></div>
                        <div style="margin-top: 12px;">
                            <input class="button_submit" type="Submit" th:value="#{topic.btn_post}">
                            <span class="fielderror"></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>

<script type='text/javascript' th:src='@{/js/tags.js}'></script>
<script type='text/javascript' th:src='@{/js/topic.js}'></script>
<script th:src="@{/js/editormd/editormd.min.js}"></script>
<script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
</body>
</html>
